<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  emojis: {
    type: Array,
    default: () => ['✈️', '🌍', '🗺️', '🎒', '🌴', '🏖️', '🗽', '🎡', '🏰', '⛰️']
  },
  count: {
    type: Number,
    default: 10
  }
})

const floatingEmojis = ref([])

// 生成随机浮动表情
const generateFloatingEmoji = () => {
  const emoji = props.emojis[Math.floor(Math.random() * props.emojis.length)]
  const x = Math.random() * window.innerWidth
  const y = Math.random() * window.innerHeight
  const speed = 0.5 + Math.random() * 1.5
  const rotation = Math.random() * 360
  const rotationSpeed = (Math.random() - 0.5) * 2

  return {
    emoji,
    x,
    y,
    speed,
    rotation,
    rotationSpeed,
    scale: 0.5 + Math.random() * 1
  }
}

// 更新浮动表情位置
const updateFloatingEmojis = () => {
  floatingEmojis.value.forEach(emoji => {
    emoji.y -= emoji.speed
    emoji.rotation += emoji.rotationSpeed

    if (emoji.y < -50) {
      emoji.y = window.innerHeight + 50
      emoji.x = Math.random() * window.innerWidth
    }
  })

  requestAnimationFrame(updateFloatingEmojis)
}

// 初始化浮动表情
const initFloatingEmojis = () => {
  floatingEmojis.value = Array(props.count).fill(null).map(() => generateFloatingEmoji())
  updateFloatingEmojis()
}

onMounted(() => {
  initFloatingEmojis()
})
</script>

<template>
  <div class="floating-emojis-container">
    <div v-for="(emoji, index) in floatingEmojis" 
         :key="index" 
         class="floating-emoji"
         :style="{
           left: `${emoji.x}px`,
           top: `${emoji.y}px`,
           transform: `rotate(${emoji.rotation}deg) scale(${emoji.scale})`,
         }">
      {{ emoji.emoji }}
    </div>
  </div>
</template>

<style scoped>
.floating-emojis-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.floating-emoji {
  position: fixed;
  font-size: 24px;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(0, 243, 255, 0.3));
  opacity: 0.8;
}

@media (max-width: 768px) {
  .floating-emoji {
    font-size: 20px;
  }
}
</style> 